<template>
  <div class="sort">
    <div class="box">
      <p class="pay">结算</p>

      <div class="check">
        <p>选择你的地址</p>
        <p>收货人:小华, 地址:江西省景德镇浮梁湘湖, 电话:1439881931 <button class="change">更改</button></p>
      </div>
      <div class="shop">
                <p v-for="(item, index) in car" :key="index">名称：{{item.name}}x{{item.count}}  价格:￥{{item.count*item.price}}</p>
               
                <p> 总价：￥{{sum}}</p>
                <p><button class="end" @click="pay">付款</button></p>
      </div>
    </div>
  </div>
</template>
 
<style scoped lang="less">
* {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji",
    "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: #212529;
}
.box {
  width: 1200px;
  margin: auto;
  
  height: 600px;
}
.check{
        padding: 20px 15px;
    border: 1px solid #f3f3f3;
    width: 600px;
    p{
        font-size: 20px;
        margin-top: 20px;
        .change{
            width: 50px;
           font-size: 18px;
           border: none;
           color: white;
           background-color: #7f87ab;
           border-radius: 2px;
           outline: none;
        }
    }
}
.pay{
      font-size: 26px;
    margin-top: 12px;
}
.shop{
    margin-top: 20px;
    display: inline-block;
    padding: 20px 15px;
    border: 1px solid #f3f3f3;
    margin-bottom: 25px;
    width: 600px;
    border-radius: 0;
    p{margin-top: 10px;}
    .end{
        float: right;
          border: none;
  width: 150px;
  background-color: #7f87ab;
  color: #ffffff;
  height: 40px;
  border-radius: 3px;
  margin-right: 20px;
   outline: none;

    }
}

</style>

<script>
export default {
  data() {
    return {
        name:'',
        car:[],
    };
  },
  methods: {
        pay(){
           var user = this.name
         var arr = localStorage.getItem("shop")
       if (arr) {
                this.$axios
          .post(
            "http://localhost:520/shopcar",
            "user=" + user  + "&arr=" + arr + "&way=" + "pay"
          )
          .then((data) => {
            if (data.data.code == "200") {
              alert('交易成功')
            } else if (data.data.code == "400") {
            
            }
          });
       }
    
      
        }

  },
  mounted() {
        

       var name = sessionStorage.getItem("name");
            this.name = name;
             var user = this.name
       var arr = localStorage.getItem("shop")
       
       if (arr) {
             this.$axios
      .post("http://localhost:520/shopcar", "name=" + user + "&arr=" + arr+"&way=" + "out")
      .then((data) => {
           
                this.car=data.data.arr
                console.log(this.car);
                    
      });
       }
  

  },
   computed: {
      sum() {
      var res = 0;
      this.car.forEach((v) => {
       
           res += v.count * v.price;
        
       
      });
      return res;
    },
   },

     beforeDestroy(){
            localStorage.removeItem('shop');
  }
};
</script>
 
